<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #canvas {}
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    attribute vec4 a_Colors;
    attribute vec2 a_Pin;

    varying vec4 v_Color;
    varying vec2 v_Pin;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 520.0;

        v_Color = a_Colors;
        v_Pin = a_Pin;
    }
</script>
<!-- 片元着色器 -->
<!-- 注意:第一行的精度一定要加 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    uniform vec2 u_CanvasSize;
    uniform float u_Set;
    void main(){
      gl_FragColor=vec4(
        gl_FragCoord.x/u_CanvasSize.x,
        gl_FragCoord.x/u_CanvasSize.x,
        u_Set,1);
    }
</script>
<!-- 线性渐变 -->
<script id="fragmentShader1" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color0;
    uniform vec4 u_Color1;
    vec4 c01 = u_Color1 - u_Color0;

    uniform vec2 u_Start;
    uniform vec2 u_End;
    vec2 se = u_End - u_Start;
    float seLen = length(se);
    vec2 normal = normalize(se);

    void main(){
        vec2 sf = vec2(gl_FragCoord) - u_Start;
        float fsLen = clamp(dot(sf, normal), 0.0 ,seLen);
        float ratio = fsLen / seLen;
    
        gl_FragColor= u_Color0 + c01 * ratio;
    }
</script>
<!-- 多节点线性渐变 -->
<script id="fragmentShader2" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_Start;
    uniform vec2 u_End;
    uniform mat4 u_ColorStops;

    vec2 se = u_End - u_Start;
    float seLen = length(se);
    vec2 se1 = normalize(se);

    //获取片元颜色
    vec4 getColor(vec4 colors[8],float ratios[8]){
        //片元颜色
        vec4 color=vec4(1);
        //当前片元减起始片元的向量
        vec2 sf=vec2(gl_FragCoord)-u_Start;
        //当前片元在se上的投影长度
        float fsLen=clamp(dot(sf,se1),0.0,seLen);
        //长度比
        float ratio=clamp(fsLen/seLen,ratios[0],ratios[8-1]);
        //第一个比值
        float ratio1=ratios[0];
        //第一个颜色
        vec4 color1=colors[0];
        //遍历节点，按比值取色
        for(int i=1;i<8;i++){
          //第二个比值
          float ratio2=ratios[i];
          //第二个颜色
          vec4 color2=colors[i];
          if(ratio>=ratio1&&ratio<=ratio2){
            //一段颜色的差值
            vec4 color2_1=color2-color1;
            //当前比值在一段比值中的比值
            float ratioInRatio=(ratio-ratio1)/(ratio2-ratio1);
            //当前比值在当前颜色段中所对应的颜色
            color=color1+color2_1*ratioInRatio;
            break;
          }
          ratio1=ratio2;
          color1=color2;
        }
        return color;
      }

    void SetColorStop(int rgb, int an, out vec4 color, out float node){
        int r = rgb / 1000000;
        int g = (rgb - r * 1000000) / 1000;
        int b = rgb - (rgb / 1000) * 1000;
        int a = an / 1000;
        int n = an - a * 1000;

        color = vec4(
            float(r),
            float(g),
            float(b),
            float(a)
        ) / 255.0;
        node = float(n) / 100.0;
    }
    
    void SetColorStops(out vec4 colors[8], out float nodes[8]){
        vec4 colorSource = vec4(1);
        float nodeSource = 0.0;
    
        for(int y = 0;y < 4; y++){
            for(int x = 0;x < 4; x += 2){
                int rgb = int(u_ColorStops[y][x]);
                int an = int(u_ColorStops[y][x + 1]);
    
                if(rgb > 0){
                    SetColorStop(rgb, an, colorSource, nodeSource);
                }
    
                colors[y * 2 + x / 2] = colorSource;
                nodes[y * 2 + x / 2] = nodeSource;
    
            }
        }
    } 


    void main(){
        vec4 colors[8];
        float nodes[8];
        SetColorStops(colors, nodes);
        gl_FragColor=getColor(colors,nodes);
    }
</script>
<!-- 多节点径向渐变 -->
<script id="fragmentShader3" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_Start;
    uniform mat4 u_ColorStops;
    uniform float u_Radius;


    //获取片元颜色
    vec4 getColor(vec4 colors[8],float ratios[8]){
        //片元颜色
        vec4 color=vec4(1);
        //当前片元减起始片元的向量
        //vec2 sf=vec2(gl_FragCoord)-u_Start;
        //当前片元在se上的投影长度
        //float fsLen=clamp(dot(sf,se1),0.0,seLen);
        //长度比
        //float ratio=clamp(fsLen/seLen,ratios[0],ratios[8-1]);

        //当前片元到起始点的距离
        float fsLen=distance(gl_FragCoord.xy,u_Start);
        //极径比
        float ratio = clamp(fsLen/u_Radius,ratios[0],ratios[8-1]);


        //第一个比值
        float ratio1=ratios[0];
        //第一个颜色
        vec4 color1=colors[0];
        //遍历节点，按比值取色
        for(int i=1;i<8;i++){
          //第二个比值
          float ratio2=ratios[i];
          //第二个颜色
          vec4 color2=colors[i];
          if(ratio>=ratio1&&ratio<=ratio2){
            //一段颜色的差值
            vec4 color2_1=color2-color1;
            //当前比值在一段比值中的比值
            float ratioInRatio=(ratio-ratio1)/(ratio2-ratio1);
            //当前比值在当前颜色段中所对应的颜色
            color=color1+color2_1*ratioInRatio;
            break;
          }
          ratio1=ratio2;
          color1=color2;
        }
        return color;
      }

    void SetColorStop(int rgb, int an, out vec4 color, out float node){
        int r = rgb / 1000000;
        int g = (rgb - r * 1000000) / 1000;
        int b = rgb - (rgb / 1000) * 1000;
        int a = an / 1000;
        int n = an - a * 1000;

        color = vec4(
            float(r),
            float(g),
            float(b),
            float(a)
        ) / 255.0;
        node = float(n) / 100.0;
    }
    
    void SetColorStops(out vec4 colors[8], out float nodes[8]){
        vec4 colorSource = vec4(1);
        float nodeSource = 0.0;
    
        for(int y = 0;y < 4; y++){
            for(int x = 0;x < 4; x += 2){
                int rgb = int(u_ColorStops[y][x]);
                int an = int(u_ColorStops[y][x + 1]);
    
                if(rgb > 0){
                    SetColorStop(rgb, an, colorSource, nodeSource);
                }
    
                colors[y * 2 + x / 2] = colorSource;
                nodes[y * 2 + x / 2] = nodeSource;
    
            }
        }
    } 


    void main(){
        vec4 colors[8];
        float nodes[8];
        SetColorStops(colors, nodes);
        gl_FragColor=getColor(colors,nodes);
    }
</script>
<!-- 多节点极坐标渐变 -->
<script id="fragmentShader4" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_Start;
    uniform mat4 u_ColorStops;
    uniform float u_Set;


    //获取片元颜色
    vec4 getColor(vec4 colors[8],float ratios[8]){
        //float pi2 = radians(u_Set);
        float pi2 = radians(360.0);

        //片元颜色
        vec4 color=vec4(1);
        //当前片元减起始片元的向量
        vec2 sf = vec2(gl_FragCoord) - u_Start;
        //当前片元相对于渐变起点的方向[-π,π]->[-0,2π]
        float dir = atan(sf.y,sf.x);
        if(dir < 0.0){
            dir += pi2;
        }
        //极角比
        float ratio = dir / pi2;



        //第一个比值
        float ratio1=ratios[0];
        //第一个颜色
        vec4 color1=colors[0];
        //遍历节点，按比值取色
        for(int i=1;i<8;i++){
          //第二个比值
          float ratio2=ratios[i];
          //第二个颜色
          vec4 color2=colors[i];
          if(ratio>=ratio1&&ratio<=ratio2){
            //一段颜色的差值
            vec4 color2_1=color2-color1;
            //当前比值在一段比值中的比值
            float ratioInRatio=(ratio-ratio1)/(ratio2-ratio1);
            //当前比值在当前颜色段中所对应的颜色
            color=color1+color2_1*ratioInRatio;
            break;
          }
          ratio1=ratio2;
          color1=color2;
        }
        return color;
      }

    void SetColorStop(int rgb, int an, out vec4 color, out float node){
        int r = rgb / 1000000;
        int g = (rgb - r * 1000000) / 1000;
        int b = rgb - (rgb / 1000) * 1000;
        int a = an / 1000;
        int n = an - a * 1000;

        color = vec4(
            float(r),
            float(g),
            float(b),
            float(a)
        ) / 255.0;
        node = float(n) / 100.0;
    }
    
    void SetColorStops(out vec4 colors[8], out float nodes[8]){
        vec4 colorSource = vec4(1);
        float nodeSource = 0.0;
    
        for(int y = 0;y < 4; y++){
            for(int x = 0;x < 4; x += 2){
                int rgb = int(u_ColorStops[y][x]);
                int an = int(u_ColorStops[y][x + 1]);
    
                if(rgb > 0){
                    SetColorStop(rgb, an, colorSource, nodeSource);
                }
    
                colors[y * 2 + x / 2] = colorSource;
                nodes[y * 2 + x / 2] = nodeSource;
    
            }
        }
    } 


    void main(){
        vec4 colors[8];
        float nodes[8];
        SetColorStops(colors, nodes);
        gl_FragColor=getColor(colors,nodes);
    }
</script>
<!-- 三点渐变 -->
<script id="fragmentShader5" type="x-shader/x-fragment">
    precision mediump float;

    vec2 p1 = vec2(00,00);
    vec2 p2 = vec2(500,00);
    vec2 p3 = vec2(00,500);

    
    vec4 c1 = vec4(1,0,0,1);
    vec4 c2 = vec4(0,1,0,1);
    vec4 c3 = vec4(0,0,1,1);
    vec2 v31 = p1 - p3;
    vec2 v32 = p2 - p3;
    vec2 v12 = p2 - p1;

    vec4 c12 = c2 - c1;

    //一圈的弧度
    float pi2 = radians(360.0);

    float getAngle(vec2 v){
        float ang = atan(v.y,v.x);
        if(ang < 0.0){
            ang += pi2;
        }
        return ang;
    }

    void main(){
        float ang31=getAngle(v31);
        float ang32=getAngle(v32);
        vec2 v3f=gl_FragCoord.xy-p3;
        float ang3f=getAngle(v3f);
  
        vec2 v1f=gl_FragCoord.xy-p1;
        //float z=v1f.x*v12.y-v1f.y*v12.x;
        float z =cross(vec3(v1f,0),vec3(v12,0)).z;
  
        vec4 color=vec4(0);
        if(ang3f>=ang31&&ang3f<=ang32&&z<0.0){
            //计算∠<v3f,p3p1>在∠<p3p2,p3p1>中的比值
            ang3f=clamp(ang3f,ang31,ang32);
            float angRatio=(ang3f-ang31)/(ang32-ang31);
  
            //向量v12和向量v3f的交点位置和颜色
            vec2 p4=p1+v12*angRatio;
            vec4 c4=c1+c12*angRatio;
  
            //向量p3-gl_FragCoord在向量p3p4中的长度比
            float lenE=distance(p4,p3);
            float lenF=length(v3f);
            float lenRatio=lenF/lenE;
  
            //基于长度比获取当前片元在c3、c4间的颜色
            color=c3+(c4-c3)*lenRatio;
        }else{
            color = vec4(0,0,0,1);
        }
        //片元颜色
        gl_FragColor=color;
        
    }
</script>

<!-- 获取随机杂色 -->
<script id="fragmentShader6" type="x-shader/x-fragment">
    precision mediump float;

    //这两种好像也没什么区别啊
    uniform float u_Set;
    uniform float u_Ang;

    float s = sin(u_Ang);
    float c = cos(u_Ang);
    mat2 m2 = mat2(
        c, s,
        -s, c
    );

    vec4 color = vec4(1,0,0,1);

    float rand(vec2 fragCoord){
        vec2 a = vec2(0.1234, 0.5678) * m2 * u_Set;
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);//这个10类似于缩放吧, 越小重复写越高
    }

    //竖向的纹理
    float randOfLine(vec2 fragCoord){
        vec2 a = vec2(0.111, 0.111);
        float n = dot(fragCoord, a);
        return fract(tan(n));
    }

    void main(){
    
        float num = randOfLine(gl_FragCoord.xy);
        //片元颜色
        gl_FragColor = vec4(num,num,num,1.0);
        
    }
</script>

<!-- 光圈 -->
<script id="fragmentShader7" type="x-shader/x-fragment">
    precision mediump float;

    uniform vec2 u_WH;
    float u_Radius = 0.5;
    float u_Diff = 0.05;
    vec4 u_Color = vec4(0,255,255,1);

 
    float getDistance(float cssX, float cssY){
        float zx = u_WH.x / 2.0;
        float zy = u_WH.y / 2.0;

        return distance(
            vec2(
                abs(zx - cssX) / zx,
                abs(zy - cssY) / zy
            ),
            vec2(0.0,0.0)
        );
    }

 

    void main(){

        float a = getDistance(gl_FragCoord.x,gl_FragCoord.y);
        if(a > u_Radius - 0.01 && a < u_Radius){
            gl_FragColor = u_Color;
        }else if(a > u_Radius && a < u_Radius + u_Diff){
            gl_FragColor = vec4(u_Color.rgb, 1.0 - (a - u_Radius) / u_Diff );
        } 
        
    
    }
</script>

<!-- 极坐标 -->
<script id="fragmentShader8" type="x-shader/x-fragment">
    precision mediump float;

    uniform float u_Set;
    uniform vec2 u_WH;
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);
 
    //获取噪波
    float rand(vec2 fragCoord){
        vec2 a = vec2(0.13121, 0.2131);
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);
    }

    void main(){

        vec2 p = gl_FragCoord.xy - center;
        //ang=[-π,π]
        float ang = atan(p.y,p.x);
        //x=[-π * 6,π * 6] 10表示色块数量
        float x = ang * 6.0;
        //此处的零表示取噪波中 y = 1 的哪一行
        //我们可以用这一行的u_Set来控制种子
        vec2 v = vec2(int(x), int(u_Set));

        float a = rand(v);
        
        gl_FragColor = vec4(a,a,a,1);
    }
</script>
<!-- 极坐标旋转 -->
<script id="fragmentShader9" type="x-shader/x-fragment">
    precision mediump float;

    uniform float u_Ang;
    float c = cos(u_Ang);
    float s = sin(u_Ang);
    mat2 m = mat2(
        c,s,
        -s,c
    );

    uniform vec2 u_WH;
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);
 
    //获取噪波
    float rand(vec2 fragCoord){
        vec2 a = vec2(0.13121, 0.2131);
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);
    }

    void main(){

        vec2 p = (gl_FragCoord.xy - center) * m;
        //ang=[-π,π]
        float ang = atan(p.y,p.x);
        //x=[-π * 6,π * 6] 10表示色块数量
        float x = ang * 6.0;
        //此处的零表示取噪波中 y = 1 的哪一行
        vec2 v = vec2(int(x), 0);

        float a = rand(v);
        
        gl_FragColor = vec4(a,a,a,1);
    }
</script>
<!-- 多极坐标旋转 -->
<script id="fragmentShader10" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    uniform float u_Set;

    //控制极坐标的发射点
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);

    float angOffset1 = u_Set * 0.002;
    float cos1 = cos(angOffset1);
    float sin1 = sin(angOffset1);
    mat2 m1 = mat2(
        cos1,sin1,
        -sin1,cos1
    );

    float angOffset2 = u_Set * -0.002;
    float cos2 = cos(angOffset2);
    float sin2 = sin(angOffset2);
    mat2 m2 = mat2(
        cos2,sin1,
        -sin1,cos1
    );

    //获取噪波
    float rand(vec2 fragCoord){
        vec2 a = vec2(0.13121, 0.2131);
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);
    }

    //获取明亮度
    float getBright(vec2 pole){
        pole=center+m2*(pole-center);
        vec2 p=gl_FragCoord.xy-pole;
        p=m1*p;
        float ang=atan(p.y,p.x);
        float x=ang*16.0;
        vec2 v=vec2(int(x),0);
        return rand(v);
    }

    void main(){

        vec2 min=u_WH*0.35;
        vec2 max=u_WH*0.65;
        float bright1 = getBright(min);
        float bright2 = getBright(max);
  
        float f=0.0;
        float sum=bright1+bright2;
        if(sum>1.0){
            f=bright1*bright2;
        }else{
            f=sum;
        }
  
        gl_FragColor = vec4(f,f,f, 1);
    }
</script>
<!-- 多极坐标旋转PLUS -->
<script id="fragmentShader11" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    uniform float u_Set;

    //控制极坐标的发射点
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);

    float angOffset1 = u_Set * 0.002;
    float cos1 = cos(angOffset1);
    float sin1 = sin(angOffset1);
    mat2 m1 = mat2(
        cos1,sin1,
        -sin1,cos1
    );

    float angOffset2 = u_Set * -0.002;
    float cos2 = cos(angOffset2);
    float sin2 = sin(angOffset2);
    mat2 m2 = mat2(
        cos2,sin1,
        -sin1,cos1
    );

    //获取噪波
    float rand(vec2 fragCoord){
        vec2 a = vec2(0.13121, 0.2131);
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);
    }

    //获取明亮度
    float getBright(vec2 pole){
        pole=center+m2*(pole-center);
        vec2 p=gl_FragCoord.xy-pole;
        p=m1*p;
        float ang=atan(p.y,p.x);
        float x=ang*16.0;
        vec2 v=vec2(int(x),0);
        return rand(v);
    }

    void main(){
        vec2 min=u_WH*0.25;
        vec2 max=u_WH*0.75;
        float bright1 = getBright(min);
        float bright2 = getBright(max);
        float bright3 = getBright(vec2(min.x,max.y));
        float bright4 = getBright(vec2(max.x,min.y));
  
        float f=0.0;
        float sum=bright1+bright2+bright3+bright4;
        if(sum>2.0){
          //f=bright1*bright2*bright3*bright4*4.0;
          gl_FragColor = vec4(1,0,0.5, 1);

        }else{
          //f=sum/2.0;
          gl_FragColor = vec4(0,1,1, 1);
        }
  
        //gl_FragColor = vec4(f, f, f, 1);
    }
</script>
<!-- 正弦型放射函数[注意这个] -->
<script id="fragmentShader12" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    uniform float u_Set;

    //控制极坐标的发射点
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);

    float omega = 4.0;
    float a = 0.5;//[0-100]


    void main(){
        vec2 p = gl_FragCoord.xy - center;
        float ang = atan(p.y,p.x);
        float f = a * sin(omega * ang) + 0.5;
        gl_FragColor = vec4(f,f,f,1);
    }
</script>
<!-- 多正弦型放射函数 -->
<script id="fragmentShader13" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    uniform float u_Set;

    //控制极坐标的发射点
    vec2 center = u_WH / 2.0;
    float pi2 = radians(360.0);

    float omega = 18.0;
    float a = 0.5;


    float angOffset1 = u_Set * 0.002;
    float cos1 = cos(angOffset1);
    float sin1 = sin(angOffset1);
    mat2 m1 = mat2(
        cos1,sin1,
        -sin1,cos1
    );

    float angOffset2 = u_Set * -0.002;
    float cos2 = cos(angOffset2);
    float sin2 = sin(angOffset2);
    mat2 m2 = mat2(
        cos2,sin1,
        -sin1,cos1
    );

    //获取噪波
    float rand(vec2 fragCoord){
        vec2 a = vec2(0.13121, 0.2131);
        float n = dot(fragCoord, a);
        return fract(sin(n) * 10000.0);
    }

    //获取明亮度
    float getBright(vec2 pole){
        pole=center+m2*(pole-center);
        vec2 p=gl_FragCoord.xy-pole;
        p=m1*p;
        float ang=atan(p.y,p.x);
        return a*sin(omega*ang)+0.5;
    }
    void main(){
        vec2 min=u_WH*0.35;
        vec2 max=u_WH*0.65;
        float bright1 = getBright(min);
        float bright2 = getBright(max);
  
        float f=(bright1+bright2)*0.55;
        gl_FragColor = vec4(f, f, f, 1);
    }
</script>

<!-- 全景图 -->
<script id="fragmentShader14" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    uniform sampler2D u_Sampler1;
    varying vec2 v_Pin;

    vec2 center = u_WH / 2.0;
    //画布对角边长度的一半
    float diagLen = length(center);
    float pi2 = radians(360.0);


    float getAngle(vec2 v){
        float ang = atan(v.y,v.x);
        if(ang < 0.0){
            ang += pi2;
        }
        return ang;
    }

    void main(){
        vec2 p=gl_FragCoord.xy-center;
        float ang=getAngle(p);
        float x=ang/pi2;
        float len=length(p);
        float y=len/diagLen;
        vec4 color=texture2D(u_Sampler1,vec2(x,y));
        if(p.x>0.0&&abs(p.y)<1.0){
            color=texture2D(u_Sampler1,vec2(0,y));
        }
        gl_FragColor=color;
    }
</script>

<!-- 磨砂金属按钮 -->
<script id="fragmentShader15" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_WH;
    vec2 center=u_WH/2.0;
    float diagLen=length(center);
    float pi2=radians(360.0);
    float omega=4.0;
    float a=0.5;

    //渐变
    float gradient(float ang){
      return a*sin(omega*ang)+0.5;
    }

    //水平拉丝
    float wire(vec2 v){
        vec2 a= vec2(0.111,0.111);
        float n= dot(v,a);
        return fract(tan(n)*10000.0);
    }

    //杂色
    float noise(vec2 v){
      vec2 a= vec2(0.1234,0.5678);
      float n= dot(v,a);
      return fract(tan(n)*10000.0);
    }

    //获取弧度
    float getAngle(vec2 v){
      float ang=atan(v.y,v.x);
      if(ang<0.0){
          ang+=pi2;
      }
      return ang;
    }

    void main(){
      vec2 p=gl_FragCoord.xy-center;
      //极径
      float len=length(p);
      //极角
      float ang=getAngle(p);
      
      float x=u_WH.x*ang/pi2;
      float y=(len/diagLen)*u_WH.y;

      //渐变
      float f1 = gradient(ang);
      f1=0.65*f1+0.5;
      
      //拉丝
      float f2 = wire(vec2(int(x),int(y)));
      gl_FragColor=vec4(vec3(f2),1);
      f2=clamp(f2,0.75,0.8);
      
	    //杂色
      float f3 = noise(gl_FragCoord.xy);
      f3*=0.07;

      //复合亮度
      float f=f1*f2;
      
      

      //凹凸效果
      float ratio1=smoothstep(-1.0,1.0,sin(ang));
      float ratio2=1.0-ratio1;
      /*
      float r=150.0;
      float expand1=r+4.0;
      float expand2=expand1+12.0;
      float expand3=expand2+2.0;
      if(len>r&&len<expand1){
          f*=ratio1+0.3;
      }else if(len>expand1&&len<expand2){
          f*=ratio2+0.1;
      }else if(len>expand2&&len<expand3){
          f*=ratio2+0.3;
      }
      */
      float ls[3];
      ls[0]=f*(ratio1+0.3);
      ls[1]=f*(ratio2+0.1);
      ls[2]=f*(ratio2+0.3);

      //初始半径
      float r=150.0;
      //半径集合
      float rs[3];
      rs[0]=r+4.0;
      rs[1]=rs[0]+12.0;
      rs[2]=rs[1]+2.0;

      //基于len值，计算片元亮度
      for(int i=0;i<3;i++){
          if(len>=r&&len<rs[i]){
              f=ls[i];
              break;
          }
          r=rs[i];
      }

      
    }
</script>



<script type="module" src="../Js Demo/jsDemo/Demo1491-多极坐标旋转.js"></script>



</html>